  <template>
  <div>
    <div class="select_top">
      <el-date-picker
        v-model="value3"
        type="week"
        format="yyyy 第 WW 周"
        placeholder="选择周"
        @change="getbigData"
      ></el-date-picker>
    </div>
    <el-table
      :data="tableData"
      style="width: 92%;font-size:13px;margin: 20px auto"
      border
      v-loading="loading"
    >
      <el-table-column prop="time" label="时间(24h)"></el-table-column>

      <el-table-column :label="weeklist[index]+'('+it+')'" v-for="(it,index) in datelist" :key="index">
        <template slot-scope="scope">
          <!-- <span
            style="cursor:pointer;margin:0 3px;background: #d8c6ef;padding: 2px 5px;"
            v-for="item in scope.row[datelist[index]]"
            :key="item"
            @mouseover="show(item)"
          >{{item.pname}}</span>-->
          <el-popover
            placement="top-start"
            :title="item.pname"
            width="200"
            trigger="hover"
            :content="item.aname+'(UUID:'+item.auuid+')'"
            v-for="item in scope.row[datelist[index]]"
            :key="item"
          >
            <span
              slot="reference"
              style="cursor:pointer;margin:2px 3px;background: #d8c6ef;padding: 4px 8px;display: inline-block;"
            >{{item.pname}}</span>
          </el-popover>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="name" label="周一"></el-table-column>
      <el-table-column prop="address" label="周二"></el-table-column>
      <el-table-column prop="address" label="周三"></el-table-column>
      <el-table-column prop="address" label="周四"></el-table-column>
      <el-table-column prop="address" label="周五"></el-table-column>
      <el-table-column prop="address" label="周六"></el-table-column>-->
    </el-table>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      datelist: [],
      ts: this.newStore(),
      value3: new Date(),
      datareslist: [],
      tableData: [],
      timelist: [
        "00",
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23"
      ],
      weeklist: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      loading: true
    };
  },
  computed: {
    value4() {
      this.datelist = [];
      for (let i = 0; i < 7; i += 1) {
        this.datelist.push(this.datetoweek(this.value3, i));
      }
      return this.datelist;
    }
  },
  created() {
    this.getbigData();
  },
  methods: {
    show(item) {
      console.log(item);
    },
    getbigData() {
      this.loading = true;
      this.tableData = [];
      this.datareslist = [];
      const promiselist = [];
      for (let i = 0; i < this.value4.length; i += 1) {
        console.log(this.datelist[i]);

        const req = {
          handle:
            "D4C22D9B0E4876FAD400B0C71B331F7D47F6D4E3C928837B967676EE6B749C2B",
          day: this.datelist[i],
          org: ""
        };
        promiselist.push(
          this.spost(this.ts, "/mainservlet", req).then(res => {
            console.log(res);
            const a = res.d.data.operation1;

            this.datareslist = this.datareslist.concat(a);
          })
        );
      }
      Promise.all(promiselist).then(() => {
        this.$message({
          message: "数据更新完成~",
          type: "success"
        });
        this.loading = false;
        for (let i = 0; i < this.timelist.length; i++) {
          let a = {};
          a.time = this.timelist[i]; //00
          this.tableData.push(a);
        }
        //console.log(this.tableData);
        console.log(this.datareslist);

        for (let i = 0; i < this.datareslist.length; i++) {
          let data1 = this.datareslist[i];
          let index = this.timelist.indexOf(data1.hash.time);
          console.log(index);
          if (!this.tableData[index][data1.hash.date]) {
            this.tableData[index][data1.hash.date] = [];
          }
          let c1 = {};
          c1.id = data1.hash.id;
          c1.pname = data1.hash.pname;
          c1.aname=data1.hash.aname;
          c1.auuid=data1.hash.auuid;
          this.tableData[index][data1.hash.date].push(c1);
        }
        console.log(this.tableData);
      });
    },
    datetoweek(day, t) {
      var today = new Date(day);
      var week = today.getDay();
      var t =
        week == 0
          ? today.getTime() - 1000 * 60 * 60 * 24 * (6 - t)
          : today.getTime() - 1000 * 60 * 60 * 24 * (week - t);
      var endtime = new Date(t);
      var curr_date = endtime.getDate();
      var curr_month = endtime.getMonth() + 1;
      var curr_year = endtime.getFullYear();
      String(curr_month).length < 2
        ? (curr_month = "0" + curr_month)
        : curr_month;
      String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
      var endtime = curr_year + "-" + curr_month + "-" + curr_date;
      return endtime;
    }
  }
};
</script>

<style lang="stylus" scoped>
.select_top {
  width: 92%;
  margin: 20px auto;
}
</style>

